<!DOCTYPE html "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">


<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<input type="hidden" id="memberId" th:value="${memberId}">
<div class="wrapper wrapper-content " id="vm">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="box">
                    <div style="display: flex;flex-direction:row;justify-content:space-between;align-items:center;"
                         class="box-header">
                        <h3>{{yearMonth}}&nbsp;&nbsp; 佣金统计</h3>
                        <el-date-picker
                                @change="renderChart"
                                v-model="yearMonth"
                                type="month"
                                size="small"
                                placeholder="选择月"
                                :picker-options="pickerOptions"
                                format="yyyy 年 MM 月"
                                value-format="yyyy-MM">
                        </el-date-picker>
                    </div>
                    <ve-line
                            class="box-content"
                            :data="chartData"
                            :settings="chartSettings"
                            :toolbox="toolbox"
                            :data-empty="dataEmpty">
                    </ve-line>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:include="vue-element::footer"></div>
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="//cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<script th:inline="javascript">
    $(function () {
        // 订单日统计
        var vm = new Vue({
            el: "#vm",
            data: {
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                yearMonth: '',
                date: '',
                toolbox: {
                    feature: {
                        magicType: {type: ['line', 'bar']},
                        saveAsImage: {}
                    }
                },
                chartSettings: {
                    metrics: ['QTY'],
                    labelMap: {
                        QTY: '佣金统计'
                    }
                },
                chartData: null,
                memberId: [[${memberId}]]
            },
            computed: {
                dataEmpty() {
                    return this.chartData && this.chartData.rows && this.chartData.rows.length > 0 ? false : true;
                }
            },
            created() {
                console.log('memberId',this.memberId);
                this.yearMonth = moment().format('YYYY-MM');
                this.renderChart(this.yearMonth);
            },
            mounted() {
                // 订单月统计饼图
                this.myChart = echarts.init(document.getElementById("container"));
                this.myChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        right: 'right',
                        data: []
                    },
                    series: [
                        {
                            name: '佣金统计',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
                window.addEventListener("resize", this.myChart.resize);
                this.date = moment().format('YYYY-MM');
                this.load(this.date);
            },
            methods: {
                renderChart(val) {
                    let that = this;
                    // axios请求数据
                    axios.get("/mp/member/monthCommission", {
                        params: {
                            yearMonth: val,
                            memberId: this.memberId
                        }
                    }).then(function (resp) {
                        const data = resp.data;
                        that.chartData = data;
                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            }
        });
    });
</script>
</body>
</html>